<html>
  <head>
    <!--Load the AJAX API-->
    <script type="text/javascript" src="https://www.google.com/jsapi"></script>
	<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.3.js"></script>
    <script type="text/javascript">
	
    // Instantiate and draw our chart, passing in some options.
  
	totalHeight = 200;
	 
	var s = new Object();
	 
	 s.easy = 1;
	 s.ok = 10;
	 s.hard = 5;
	 s.stop = 1;
	 
	 
	 function createChart(){
		$("#chart").css('width', 200);
		$("#updateButton").css('width', 200);
		$("#chart").css('height', totalHeight);
		$("#easy").css('background', 'blue');
		$("#ok").css('background', 'green');
		$("#hard").css('background', 'yellow');
		$("#stop").css('background', 'red');
		updateChart();
	}
	
	$(document).ready(createChart);
	
	function updateChart(){

		s.total = s.ok + s.hard + s.stop + s.easy;	
		heightPerStudent = totalHeight / s.total;
		
		$("#hard").css('height', s.hard * heightPerStudent);
		$("#easy").css('height', s.easy * heightPerStudent);
		$("#stop").css('height', s.stop * heightPerStudent);
		$("#ok").css('height', s.ok * heightPerStudent);}
		/*
		if(s.easy > 0){
			$("#easy").css('visibility', 'true');
		} else {
			$("#easy").css('visibility', 'false');
		}
		
		if(s.ok > 0){
			$("#ok").css('visibility', 'true');
		} else {
			$("#ok").css('visibility', 'false');
		}
		
		if(s.hard > 0){
			$("#hard").css('visibility', 'true');
		} else {
			$("#hard").css('visibility', 'false');
		}
		
		if(s.stop > 0){
			$("#stop").css('visibility', 'true');
		} else {
			$("#stop").css('visibility', 'false');
		}
		
	 }
	 */
	message = "ping";
	data = [];
	
	 function poll(){
        $.ajax({
            type: 'POST',
            dataType: 'text',
            url: 'getTempoDistribution.php',
            data: '',
            success: function(data){
                handleAjax(data,null);
            }
        });
		setTimeout("poll()", "1000");
	}
	
	function handleAjax(data, lol){
		 var xmlDoc = $.parseXML( data ),
		$xml = $( xmlDoc ),
			hard = $xml.find( "hard" ).text();
		ok = $xml.find( "ok" ).text();
		easy = $xml.find( "easy" ).text();
		stop = $xml.find( "stop" ).text();
		
		s.ok = parseInt(ok);
		s.hard = parseInt(hard);
		s.stop = parseInt(stop);
		s.easy = parseInt(easy);
		
		updateChart();
	}
	
	var alertbool = false;
	
	function update() {
		if(alertbool){
			alertbool = false;
			$("#updateButton").text("Update off");
		} else {
			alertbool = true;
			
			$("#updateButton").text("Update on");
		}
	}
	
	
	
	poll();
	
    </script>
  </head>

  <body>
 
	
	<table id="chart">
			<tr id="stop"><td></td></tr>
			<tr id="hard"><td></td></tr>
			<tr id="ok"><td></td></tr>
			<tr id="easy"><td></td></tr>
	</table>
	
	<form>
		<button id="updateButton" width="200" type="Button" text="Update" onClick="javascript:update()">Update on</button>
	</form>
	
  </body>
</html>

